<!-- 列表分类-分类列表 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="分类列表" name="1">
            <el-radio-group v-model="selectClassifyType">
                <el-radio :label="1">选择绑定组</el-radio>
                <el-radio :label="2">自定义分类</el-radio>
            </el-radio-group>

            <template v-if="selectClassifyType === 1">
                <el-divider></el-divider>
                <layout-pane label="列表">
                    <div class="select-content">
                        <el-tree-select
                            :modelValue="classifyGroupId"
                            :data="classifys"
                            check-strictly
                            filterable
                            class="select-ele"
                            @node-click="onSetClassify"
                        />
                        <el-button
                            title="刷新"
                            :loading="classifysLoading"
                            class="refresh-btn"
                            @click="getClassifyList"
                        >
                            <el-icon><icon-refresh-right /></el-icon>
                        </el-button>
                    </div>
                </layout-pane>
            </template>
            <template v-else-if="selectClassifyType === 2">
                <el-divider></el-divider>
                <si-collapse-group
                    v-model="classifyList"
                    is-draggable
                    is-add
                    is-delete
                    add-text="添加分类"
                    :add="getAddData"
                    :node-title="data => data.name"
                >
                    <template #item="{ element, index }">
                        <div class="row-wrap">
                            <div class="left-wrap">选择分类</div>
                            <div class="right-wrap">
                                <div class="select-content">
                                    <el-tree-select
                                        :modelValue="element.id"
                                        :data="classifys"
                                        check-strictly
                                        filterable
                                        class="select-ele"
                                        @node-click="data => onSetCustomClassifyItem(data, index)"
                                    />
                                    <el-button
                                        title="刷新"
                                        :loading="classifysLoading"
                                        class="refresh-btn"
                                        @click="getClassifyList"
                                    >
                                        <el-icon><icon-refresh-right /></el-icon>
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </template>
                </si-collapse-group>
            </template>

            <el-divider></el-divider>
            <layout-pane label="选中项">
                <el-tree-select
                    v-model="selectedIndex"
                    :data="classifySelects"
                    check-strictly
                    filterable
                />
                <div class="tip-txt" style="margin-top: 5px;">
                    {{ selectClassifyType === 1 ? '注：当前分类列表中的分类ID' : '注：当前分类列表索引值' }}
                </div>
            </layout-pane>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, ref, computed, onMounted } from 'vue'
import { getModuleCommonData } from '@/api/app'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiImagePicker,
    SiInputNumber,
    SiCollapseGroup
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'NewClassifyContent',
    components: {
        LayoutPane,
        SiImagePicker,
        SiInputNumber,
        SiCollapseGroup
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const classifys = ref([])
        const classifysLoading = ref(false)

        const selectClassifyType = computed({
            get: () => widget.value.widgetData.eles.customFeature.selectClassifyType,
            set: val => {
                widget.value.widgetData.eles.customFeature.selectClassifyType = val
                selectedIndex.value = ''
                if (val === 2 && classifyList.value.length === 0) {
                    classifyList.value = [{
                        name: '分类1',
                        id: '',
                        children: []
                    }]
                }
                getClassifyList()
            }
        })

        const classifyGroupId = computed({
            get: () => widget.value.widgetData.eles.customFeature.classifyGroupId,
            set: val => {
                widget.value.widgetData.eles.customFeature.classifyGroupId = val
                selectedIndex.value = ''
            }
        })

        const selectedIndex = computed({
            get: () => widget.value.widgetData.eles.customFeature.selectedIndex,
            set: val => widget.value.widgetData.eles.customFeature.selectedIndex = val
        })

        const classifyList = computed({
            get: () => widget.value.widgetData.eles.customFeature.classifyList,
            set: val => widget.value.widgetData.eles.customFeature.classifyList = val
        })

        const classifySelects = computed(() => {
            let list = []
            if (selectClassifyType.value === 1) {
                list = classifys.value
            } else if (selectClassifyType.value === 2) {
                list = classifyList.value.map((item, index) => ({
                    label: item.name,
                    value: index.toString()
                }))
            }
            return list
        })

        onMounted(() => {
            getClassifyList()
        })

        const getClassifyList = () => {
            classifysLoading.value = true
            getModuleCommonData({
                dataType: 'goods$category'
            }).then(res => {
                if (res.Status === 1) {
                    const { ModuleCategoryList } = res.Data
                    const formatData = list => list?.map(item => ({
                        label: item.Name,
                        value: item.Id,
                        children: formatData(item.Children || [])
                    })) || []
                    classifys.value = formatData(ModuleCategoryList || [])
                    classifys.value.unshift({
                        label: '全部',
                        value: '0'
                    })
                }
            }).finally(() => {
                classifysLoading.value = false
            })
        }

        const onSetClassify = data => {
            classifyGroupId.value = data.value
            if (data.value === '0') {
                classifyList.value = []
            } else {
                classifyList.value = [{
                    name: data.label,
                    id: data.value,
                    children: data.children.map(n => ({
                        name: n.label,
                        id: n.value
                    }))
                }]
            }
        }

        const getAddData = () => {
            return {
                name: '分类项',
                id: '',
                children: []
            }
        }

        const onSetCustomClassifyItem = (data, index) => {
            classifyList.value[index] = {
                name: data.label,
                id: data.value,
                children: data?.children?.map(n => ({
                    name: n.label,
                    id: n.value
                })) || []
            }
        }

        return {
            widget,

            classifys,
            classifysLoading,

            selectClassifyType,
            classifyGroupId,
            selectedIndex,
            classifyList,
            classifySelects,

            onSetClassify,
            getAddData,
            getClassifyList,
            onSetCustomClassifyItem
        }
    }
})
</script>

<style lang="less" scoped>
.row-wrap {
    display: flex;
    align-items: center;
    .left-wrap {
        margin-right: 10px;
    }
    .right-wrap {
        flex: 1;
    }
}
.select-content {
    position: relative;
    flex: 1;
    display: inline-flex;
    .select-ele {
        flex: 1;
        .el-input__inner {
            // padding: 0 25px 0 10px;
        }
        .el-select-dropdown__item {
            padding: 0 20px;
        }
    }
    ::v-deep(.refresh-btn) {
        margin-left: 10px;
        width: 32px;
        height: 32px;
        font-size: 16px;
        padding: 0;
        .el-icon.is-loading + span {
            display: none;
        }
    }
}
.tip-txt {
    font-size: 12px;
    color: var(--edit-text-color-secondary);
}
</style>